<template>
  <div class="search">
    <el-input
      v-model="$store.state.userStore.searchContent"
      class="searchInput"
      @keyup.enter.native="search"
    ></el-input>
    <el-button
      type="info"
      icon="el-icon-search"
      class="searchBtn"
      @click.native="search"
    ></el-button>
    <el-button
      type="primary"
      class="addBtn"
      @click="showDialog"
      v-has="131"
      :disabled="!$store.state.btn_permission.includes('131')"
      >添加用户</el-button
    >
    <!-- 显示dialog -->
    <dialog-add-user></dialog-add-user>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import DialogAddUser from "./Dialog/DialogAddUser";

export default {
  name: "search",
  data() {
    return {
      dialogVisible: false,
    };
  },
  components: { DialogAddUser },
  methods: {
    ...mapActions("userStore", ["get_user_list"]),
    search() {
      // console.log(this.$store.state.userStore.searchContent);
      // this.$store.dispatch("userStore/get_user_list");
      this.get_user_list();
    },
    showDialog() {
      this.dialogVisible = true;
      this.$bus.$emit("visibleAddUser", this.dialogVisible);
    },
  },
};
</script>

<style  scoped>
.search {
  position: relative;
  overflow: hidden;
  height: 74px;
}
.searchInput ::v-deep .el-input__inner {
  position: absolute;
  left: 20px;
  height: 40px;
  width: 25%;
  border-radius: 0;
}
.searchBtn {
  position: absolute;
  left: calc(25% + 20px);
  height: 40px;
  top: 17px;
  border-radius: 0;
}
.addBtn {
  position: absolute;
  left: calc(25% + 20px + 60px);
  height: 40px;
  top: 17px;
  border-radius: 0;
}
</style>
